<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
           <el-button @click="$router.push('new/')" type="success" class="el-button--small">
            <i class="el-icon-edit"></i>
            新增试题
            </el-button>
        </div>
        <questions-form
        @updateChoice="updateChoice"
        :updateChoice.sync="headerForm"
        @cUpdateQuestion="updateQuestion" ></questions-form>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>

        <el-alert
            :closable="false"
            show-icon
            type="info"
            style="margin-bottom:15px"
            :title="description"
            >
        </el-alert>
        <el-table :data="questionData" style="width: 100%">
          <el-table-column width="120px" prop="number" label="试题编号">
          </el-table-column>
          <el-table-column width="120px" prop="subject" label="学科">
          </el-table-column>
          <el-table-column width="120px" prop="catalog" label="目录">
          </el-table-column>
          <el-table-column width="120px" label="题型">
            <template v-slot="{row}">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column width="280px" prop="question" label="题干">
            <template v-slot="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column width="180px" prop="addDate" label="录入时间">
            <template v-slot="{row}">
               {{ FormatDateTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column width="80px" label="难度">
             <template v-slot="{row}">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column width="120px" prop="enterprise" label="录入人">
          </el-table-column>
          <el-table-column width="120px" label="审核状态" >
            <template v-slot="{row}">
                <span v-if="row.chkState === 1">已审核</span>
                <span v-else-if="row.chkState === 2">拒绝</span>
                <span v-else>待审核</span>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="审核意见">
            <template v-slot="{row}">
                {{row.chkRemarks}}
            </template>
          </el-table-column>
          <el-table-column  width="120px" label="审核人">
            <template v-slot="{row}">
                {{row.chkUser}}
            </template>
          </el-table-column>
          <el-table-column width="120px" label="发布状态">
            <template v-slot="{row}">
                <!-- <span v-if="row.publishState === 1">已下架</span>
                <span v-else-if="row.publishState === 0">已发布</span> -->
                <span v-if="row.chkState === 0 || row.chkState === 2">待发布</span>
                <div v-else-if="row.chkState === 1">
                  <span v-if="row.publishState === 1">已下架</span>
                  <span v-else-if="row.publishState === 0">已发布</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column  width="200px" fixed="right" label="操作">
            <template v-slot="{row}">
              <el-button  @click="Find(row.id)" type="text" size="small">预览</el-button>
              <el-button
              @click="hChk(row.id)"
              :disabled="row.chkState ? true : false"
              type="text"
              size="small"
              >审核</el-button>
              <el-button
              :disabled="row.publishState === 0 ? true : false"
              @click="$router.push(`new/?id=${row.id}`)"
              type="text"
              size="small">修改</el-button>
              <el-button
              @click="updownChoice(row,row.publishState)"
              type="text" size="small">
                {{row.publishState === 0 ? '下架' : '上架'}}
              </el-button>
              <el-button
              @click="hClose(row.id)"
              :disabled="row.publishState === 1 ? false : true"
              type="text"
              size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <page-tool
            :paginationPage="page"
            :paginationPagesize="pagesize"
            :total="total"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
            ></page-tool>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible"
      width="22%"
      :before-close="handleClose">
      <el-form>
        <el-form-item >
          <el-radio-group v-model="form.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入审核意见" type="textarea" v-model="form.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateChk">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
       right
       title="提示"
       :visible.sync="updateDialog"
       width="30%"
       :before-close="handleClose">
       <span>
         <i class="el-icon-warning" style="font-size:25px;margin-right:10px;vertical-align:middle;color:#e6a23c;"></i>
       </span>
       <span v-if="hChoiceType === 1">您确定上架这道题目?</span>
       <span v-else-if="hChoiceType === 0">您确定下架这道题目?</span>
       <span v-else-if="delId">此操作将永远删除该题,是否继续?</span>
       <div slot="footer" class="dialog-footer">
         <el-button @click="updateDialog = false">取 消</el-button>
         <el-button type="primary" @click="hUpdown">确 定</el-button>
       </div>
    </el-dialog>

    <questions-preview
        ref="popUp"
        :showDialogVisible.sync="viewDialog"
        :Id="viewId"
        ></questions-preview>
  </div>
</template>

<script>
import questionsForm from '../components/questions-form.vue'
import pageTool from '../../module-dashboard/components/pageTool.vue'
import QuestionsPreview from '../components/questions-preview.vue'
import dayjs from 'dayjs'
import { choice, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions'
export default {
  components: { questionsForm, pageTool, QuestionsPreview },
  data () {
    return {
      questionData: [],
      activeName: 'first',
      page: 1,
      pagesize: 5,
      total: '',
      dialogVisible: false, // 对话框显示隐藏
      updateDialog: false, // 上下架对话框
      description: '',
      form: { chkState: 1 },
      hChoiceType: -1, // 0 上架 1 下架
      updown: {}, // 上下架 需要的参数
      delId: -1,
      headerForm: {},
      viewDialog: false, // 预览显示框
      viewId: '' // 预览显示框Id
    }
  },
  created () {
    this.hQuestion()
  },
  methods: {
    Find (id) {
      this.viewId = id
      this.viewDialog = true
      this.$nextTick(() => {
        this.$refs.popUp.getInfo()
      })
    },
    updateQuestion () {
      this.headerForm = {}
      this.hQuestion()
    },
    async hClose (id) {
      this.hChoiceType = -1
      this.delId = id
      this.updateDialog = true
      // await remove({ id })
      // this.hQuestion()
    },
    async hUpdown () {
      console.log(this.hChoiceType)
      if (this.hChoiceType === -1) {
        await remove({ id: this.delId })
        this.$message.success('删除成功')
      } else {
        this.updown.publishState ? this.updown.publishState = 0 : this.updown.publishState = 1
        await choicePublish(this.updown)
        this.hChoiceType ? this.$message.success('上架成功') : this.$message.success('下架成功')
      }
      this.updateDialog = false
      this.hQuestion()
    },
    updownChoice (obj, type) {
      // console.log(obj.id, obj.publishState, type)
      this.updateDialog = true
      this.hChoiceType = type
      this.updown = obj
    },
    async updateChk () {
      if (!this.form.chkRemarks) { return this.$message.warning('请输入审核意见') }
      console.log(this.form)
      await choiceCheck(this.form)
      this.dialogVisible = false
      this.form = { chkState: 1 }
      this.$message.success('审核成功')
      this.hQuestion()
    },
    hChk (id) {
      this.dialogVisible = true
      this.form.id = id
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    pageSizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      this.hQuestion()
    },
    pageChange (page) {
      this.page = page
      this.hQuestion()
    },

    async hQuestion () {
      if (this.activeName === 'first' && !this.headerForm.subjectID) {
        this.res = await choice({ page: this.page, pagesize: this.pagesize })
      } else if (this.activeName !== 'first' && !this.headerForm.subjectID) {
        this.res = await choice({ page: this.page, pagesize: this.pagesize, chkState: this.activeName })
      } else if (this.activeName && this.headerForm) {
        if (this.activeName === 'first') {
          this.res = await choice({ page: this.page, pagesize: this.pagesize, ...this.headerForm })
        } else {
          this.res = await choice({ page: this.page, pagesize: this.pagesize, chkState: this.activeName, ...this.headerForm })
        }
      }
      // console.log(this.res.data)
      this.questionData = this.res.data.items
      this.total = this.res.data.counts
      this.description = '数据一共' + this.total + '条'
    },
    async handleClick (tab, event) {
      this.page = 1
      this.hQuestion()
    },
    updateChoice (obj) {
      // console.log(obj)
      this.headerForm = obj
      console.log(this.headerForm)
      this.$nextTick(() => {
        this.hQuestion()
      })
    },
    // 格式化时间
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  watch: {
    $route: function (newVal, oldVal) {
    // 监听 $route 变化，并执行相应操作
      console.log('路由发生了变化：', newVal.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
    padding: 0 10px;
    margin: 10px 0;
  .btn_wrapper {
    margin-bottom: 15px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }
}
</style>
